<template>
	<view class="">
		<view class="bg-w mt7 plr15">
			<view class="flex alcenter">
				<view>柜机名称：</view>
				<input type="text" value="" placeholder="请输入柜机名称" class="border-bottom pd10_15 fl1" v-model="title" />
			</view>
			<view class="flex alcenter">
				<view>柜机编号：</view>
				<input type="text" value="" placeholder="请输入柜机编号" class="border-bottom pd10_15 fl1" v-model="number" />
			</view>
			<view class="flex alcenter">
				<view>柜机总数：</view>
				<input type="number" value="" placeholder="请输入柜机总数" class="pd10_15 fl1" v-model="num" />
			</view>
		</view>
		<view class="bg-w mt7 flex alcenter spaceb pd10_15">
			<view>柜机位置：</view>
			<input type="text" value="" placeholder="请输入柜机位置" v-model="address" class="address_input text-over" />
			<view class="dw" @click="choose">
				<image src="@/static/images/hqwz.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
				<view>定位</view>
			</view>
		</view>
		<view class="bg-w mt7 pd15">
			<view class="flex">
				<view>柜机备注：</view>
				<textarea value="" placeholder="请输入备注" v-model="content" maxlength="300" />
			</view>
		</view>
		<view class="" style="padding: 60rpx 80rpx;">
			<view class="cl-w border-rad10 text-center plt10" style="background: #FD7A4D;"
				@click="$u.throttle(submit,5000)">立即添加</view>
		</view>

	</view>
</template>

<script>
	import api from "../../../common/fxb.js"
	export default {
		data() {
			return {
				title: '',
				number: '',
				num: '',
				address: '',
				content: '',
				latitude: '',
				longitude: '',
				s_id: uni.getStorageSync("s_id")
			}
		},
		onShow() {},
		onLoad() {

		},
		methods: {
			to_tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			},

			choose() {
				var that = this
				//#ifdef MP-WEIXIN
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									that.chooseLocation()
									return;
								}
							})
						} else {
							that.chooseLocation()
							return;
						}
					}
				})
				//#endif

				//#ifndef MP-WEIXIN 
				that.chooseLocation()
				//#endif
			},
			chooseLocation() {
				var that = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						that.address = res.name
						that.latitude = res.latitude
						that.longitude = res.longitude
						var latitude = res.latitude;
						var longitude = res.longitude;
						// api.ApiGet({
						// 	do: 'key',
						// }, function(res) {
						// 	var baidu_key = res.data.datas.baidu_key;
						// 	uni.request({
						// 		url: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=' +
						// 			baidu_key + '&location=' + latitude + ',' + longitude +
						// 			'&output=json&coordtype=wgs84ll',
						// 		data: {},
						// 		header: {
						// 			'Content-Type': 'application/json'
						// 		},
						// 		success: function(res) {
						// 			var city = res.data.result.addressComponent.city;
						// 			var province = res.data.result.addressComponent
						// 				.province;
						// 			var district = res.data.result.addressComponent
						// 				.district;
						// 			that.addresss = city + '-' + province + '-' + district

						// 		}
						// 	})
						// })
					}
				});
			},
			submit() {
				var that = this
				if (!that.title) {
					return that.$u.toast('请输入柜机名称')
				}
				if (!that.number) {
					return that.$u.toast('请输入柜机编号')
				}
				if (!that.num) {
					return that.$u.toast('请输入柜机总数')
				}
				if (!that.address) {
					return that.$u.toast('请选择位置信息')
				}
				that.global.request.post({
					data: {
						do: 'Add_cabinet',
						s_id: uni.getStorageSync("s_id"),
						title: that.title,
						number: that.number,
						content: that.content,
						num: that.num,
						address: that.address,
						addresss: that.addresss,
						latitude: that.latitude,
						longitude: that.longitude
					},
					success: res => {
						uni.showToast({
							title: '添加成功！',
							icon: 'none',
							duration: 4000
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500);
					}
				})

			}
		}
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.border-bottom {
		border-bottom: 1px solid #d9d9d9;
	}

	.default {
		color: #666;
	}

	.address_input {
		width: 58%;
	}

	.dw {
		padding: 8rpx 16rpx;
		color: #3cc51f;
		border: 1px solid #3cc51f;
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	textarea {
		width: 79%;
		height: 140rpx;
	}

	.upload-box {
		margin-top: 20rpx;
		width: 180rpx;
		height: 180rpx;
		border: 1px solid #d9d9d9;
		position: relative;
	}

	.upload-box::before {
		width: 2px;
		height: 39.5px;
	}

	.upload-box::after {
		width: 39.5px;
		height: 2px;
	}

	.upload-box::before,
	.upload-box::after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #d9d9d9;
	}
</style>
